<template>
    <div class="container">
        <div class="monitor">
            <div class="content" v-if="dataFlag">
                <div class="title">
                    <Tabs  v-model="tabActiveName"  @on-click="setTabClick">
                        <TabPane v-for="item in list" :value="item.id" :key="item.id" :label="item.code"></TabPane>
                    </Tabs>
                </div>
                <div class="content_img">
                      <div class="imgBox bridgeImg">
                          <div class="bridge_dh bridge_dh1">
                             <img src="./../../assets/images/fse/bridge/bridge_02.png" class="img2" />
                             <div class="path path1">
                                <svg mlns="http://www.w3.org/2000/svg" version="1.1" style="width:30px; height:100%">
                                    <line id="lineAB" x1="0" y1="0" x2="0" y2="50" stroke="#979797" stroke-width="2" />
                                    <line id="lineBC" x1="30" y1="0" x2="30" y2="50" stroke="#979797" stroke-width="2" />
                                </svg>
                            </div>
                             <img src="./../../assets/images/fse/bridge/bridge_03.png" class="img1" />
                         </div>
                          <div class="bridge_dh bridge_dh2">
                             <img src="./../../assets/images/fse/bridge/bridge_02.png" class="img2" />
                             <div class="path path2">
                                <svg mlns="http://www.w3.org/2000/svg" version="1.1" style="width:30px; height:100%">
                                    <line  id="lineAB1" x1="0" y1="0" x2="0" y2="50" stroke="#979797" stroke-width="2" />
                                    <line id="lineBC1" x1="30" y1="0" x2="30" y2="50" stroke="#979797" stroke-width="2" />
                                </svg>
                            </div>
                             <img src="./../../assets/images/fse/bridge/bridge_03.png" class="img1" />
                         </div>
                      </div>
                </div>
                <div class="bottom">
                    <div class="box">
                        <div class="bridge item">
                            <div class="sub">前天车运行状态</div>
                            <p @click="getMsg(0)">
                                <span>起升高度:</span>
                                <span class="num">{{frontLiftHeight}}m</span>
                            </p>
                            <p @click="getMsg(1)">
                                <span>纵移位置:</span>
                                <span class="num">{{frontLngPosition}}m</span>
                            </p>
                            <p @click="getMsg(2)">
                                <span>横移位置:</span>
                                <span class="num">{{frontLatPosition}}m</span>
                            </p>
                            <p @click="getMsg(3)">
                                <span>起升重量:</span>
                                <span class="num">{{frontLiftWeight}}t</span>
                            </p>
                        </div >
                        <div class = "bridge item" >
                            <div class="sub">后天车运行状态</div>
                            <p @click="getMsg(4)">
                                <span>起升高度:</span>
                                <span class="num">{{backLiftHeight}}m</span>
                            </p>
                            <p @click="getMsg(5)">
                                <span>纵移位置:</span>
                                <span class="num">{{backLngPosition}}m</span>
                            </p>
                            <p @click="getMsg(6)">
                                <span>横移位置:</span>
                                <span class="num">{{backLatPosition}}m</span>
                            </p>
                            <p @click="getMsg(7)">
                                <span>起升重量:</span>
                                <span class="num">{{backLiftWeight}}t</span>
                            </p>
                        </div>
                        <div class = "bridge item">
                            <div class="sub">整机运行状态</div>
                            <p @click="getMsg(8)">
                                <span>纵移位置:</span>
                                <span class="num">{{lngPosition}}m</span>
                            </p>
                            <p @click="getMsg(9)">
                                <span>横移位置:</span>
                                <span class="num">{{latPosition}}m</span>
                            </p>
                        </div >
                        <div class = "bridge item">
                            <div class="sub">其他状态</div>
                            <p @click="getMsg(10)">
                                <span>风速:</span>
                                <span class="num">{{windSpeed}}m/s</span>
                            </p>
                            <p @click="getMsg(11)">
                                <span>主梁水平度:</span>
                                <span class="num">{{levelAngle}}°</span>
                            </p>
                            <p @click="getMsg(12)">
                                <span>前支垂直度:</span>
                                <span class="num">{{verticalAngle}}°</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content nodata" v-if="!dataFlag"> 暂无架桥机设备,请在架桥机设备页,添加并绑定架桥机设备</div>
        </div>

        <Modal v-model="msgModal" title="历史数据" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="log">
                <div class="list">
                    <div class="item">
                        <span>数据类型:</span>
                        <span>{{ msgType }}</span>
                    </div>
                    <div class="item">
                        <span>选择日期:</span>
                        <DatePicker type="date" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd" v-model="msgTime" :clearable="false"></DatePicker>
                        <el-button type="primary" @click="searchLog" style="margin-left:20px;" size="small" plain>搜索</el-button>
                    </div>
                </div>
                <div class="echarts" >
                    <div class="canvas_none" v-if="dateList.length==0"><img src="../../assets/images/common/canvas_none1.png" alt=""></div>
                    <div id="line" :style="{ height: '400px', width: '800px' }" ></div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import {getBridgeMonitor, getBridgeLog, getBridgeList,} from "@/api/api.js";
import {format} from "@/sever/utils";
export default {
    data(){
        return{
            tabActiveName: "",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            list: [],
            dataFlag: false,
            activeId: -1,
            bridgeId: "",
            frontLiftHeight: "",
            frontLngPosition: "",
            frontLatPosition: "",
            frontLiftWeight: "",
            backLiftHeight: "",
            backLiftWeight: "",
            backLngPosition: "",
            backLatPosition: "",
            lngPosition: "",
            latPosition: "",
            windSpeed: "",
            levelAngle: "",
            verticalAngle: "",
            msgModal: false,
            msgType: "",
            msgTime: new Date(),
            timeList: [],
            dateList: [],
            count: 0,
            msgName: "",
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    },
    methods: {
        setTabClick(name) {
            this.activeId = this.list[name].bridgeId;
            this.bridgeId = this.list[name].bridgeId;
            this.getBridgeDate();
        },
        getAllList() {
            let params = {
                deptId: this.deptId,
                bindFlag:1,
            };
            getBridgeList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        if (res.data.list.length == 0) {
                            this.dataFlag = false;
                            this.bridgeId = "";
                            this.activeId = -1;
                        } else {
                            this.bridgeId = res.data.list[0].bridgeId;
                            this.activeId = res.data.list[0].bridgeId;
                            this.dataFlag = true;
                            this.getBridgeDate();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getBridgeDate(){
            let params = {
                bridgeId: this.bridgeId
            };
            getBridgeMonitor(params).then(res => {
                if (res.code == 200) {
                    this.frontLiftHeight = res.data.frontLiftHeight || 0;
                    this.frontLiftWeight = res.data.frontLiftWeight || 0;
                    this.frontLngPosition = res.data.frontLngPosition || 0;
                    this.frontLatPosition = res.data.frontLatPosition || 0;
                    this.backLiftHeight = res.data.backLiftHeight || 0;
                    this.backLiftWeight = res.data.backLiftWeight || 0;
                    this.backLngPosition = res.data.backLngPosition || 0;
                    this.backLatPosition = res.data.backLatPosition || 0;
                    this.lngPosition = res.data.lngPosition || 0;
                    this.latPosition = res.data.latPosition || 0;
                    this.windSpeed = res.data.windSpeed || 0;
                    this.levelAngle = res.data.levelAngle || 0;
                    this.verticalAngle = res.data.verticalAngle || 0;
                    let h1 = 40 + this.frontLiftHeight;
                    let width1 = 0.1;
                    let w1 = width1 + this.frontLatPosition/100;
                    $("#lineAB").attr('y2',h1);
                    $("#lineBC").attr('y2',h1);
                    $(".bridge_dh1").animate({left:  w1 +'rem'});
                    $(".path1").css({height:h1+'px'});
                    let h2 = 40 + this.backLiftHeight;
                    let width2 = 1.2;
                    let w2 = width2 + this.backLatPosition/100;
                    $("#lineAB1").attr('y2',h2);
                    $("#lineBC1").attr('y2',h2);
                    $(".bridge_dh2").animate({left:  w2 +'rem'});
                    $(".path2").css({height:h2+'px'});
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getMsg(type) {
            this.msgTime = new Date();
            if (type == 0) {
                this.msgType = "前天车起升高度";
                this.msgName = "米（m）";
            } else if (type == 1) {
                this.msgType = "前天车纵移位置";
                this.msgName = "米（m）";
            } else if (type == 2) {
                this.msgType = "前天车横移位置";
                this.msgName = "米（m）";
            } else if (type == 3) {
                this.msgType = "前天车起升重量";
                this.msgName = "吨（t）";
            } else if(type == 4){
                this.msgType = "后天车起升高度";
                this.msgName = "米（m）";
            } else if (type == 5) {
                this.msgType = "后天车纵移位置";
                this.msgName = "米（m）";
            } else if (type == 6) {
                this.msgType = "后天车横移位置";
                this.msgName = "米（m）";
            } else if (type == 7) {
                this.msgType = "后天车起升重量";
                this.msgName = "吨（t）";
            } else if (type == 8) {
                this.msgType = "整机纵移位置";
                this.msgName = "米（m）";
            } else if (type == 9) {
                this.msgType = "整机横移位置";
                this.msgName = "米（m）";
            }
            else if (type == 10) {
                this.msgType = "风速";
                this.msgName = "米每秒（m/s）";
            }
            else if (type == 11) {
                this.msgType = "主梁水平度";
                this.msgName = "度（°）";
            }
            else if (type == 12) {
                this.msgType = "前支垂直度";
                this.msgName = "度（°）";
            }
            this.count = type;
            this.getLogMsg(type);
        },
        searchLog() {
            this.getLogMsg(this.count);
        },
        getLogMsg(type) {
            this.timeList = [];
            this.dateList = [];
            let params = {
                bridgeId: this.bridgeId,
                time: format(this.msgTime, "YYYY-MM-DD")
            };
            getBridgeLog(params)
                .then(res => {
                    if (res.code == 200) {
                        this.msgModal = true;
                        if (res.data.list.length > 0) {
                            res.data.list.forEach(i => {
                                this.timeList.push(i.time);
                                if (type == 0) {
                                    this.dateList.push(i.frontLiftHeight);
                                } else if (type == 1) {
                                    this.dateList.push(i.frontLngPosition);
                                } else if (type == 2) {
                                    this.dateList.push(i.frontLatPosition);
                                } else if (type == 3) {
                                    this.dateList.push(i.frontLiftWeight);
                                } else if (type == 4) {
                                    this.dateList.push(i.backLiftHeight);
                                } else if (type == 5) {
                                    this.dateList.push(i.backLngPosition);
                                } else if (type == 6) {
                                    this.dateList.push(i.backLatPosition);
                                } else if (type == 7) {
                                    this.dateList.push(i.backLiftWeight);
                                } else if (type == 8) {
                                    this.dateList.push(i.lngPosition);
                                } else if (type == 9) {
                                    this.dateList.push(i.latPosition);
                                } else if (type == 10) {
                                    this.dateList.push(i.windSpeed);
                                } else if (type == 11) {
                                    this.dateList.push(i.levelAngle);
                                } else if (type == 12) {
                                    this.dateList.push(i.verticalAngle);
                                }
                            });
                        }
                        this.darwLine();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        darwLine() {
            let line = this.$echarts.init(document.getElementById("line"));
            line.setOption({
                color: ["rgb(255, 179, 94)"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                    // formatter: "{b0}<br/>{a0}: {c0}"
                },
                grid: {
                    top: "18%",
                    left: "50px",
                    right: "14px",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    data: this.timeList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    show: true,
                    name: this.msgName,
                    splitLine: {
                        //去除网格线
                        show: false
                    },
                },
                series: [
                    {
                        name: this.msgName,
                        type: "line",
                        smooth: true ,
                        data: this.dateList,
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                // label: {
                                //   show: true, //开启显示
                                //   position: "top", //在上方显示
                                //   textStyle: {
                                //     //数值样式
                                //     color: "#02C0C0",
                                //     fontSize: 16
                                //   }
                                // },
                                lineStyle: {
                                    color: "#1891FF" //折线的颜色
                                },
                                color: "#2BB6FF"
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang = "scss" >
@import "./../../assets/style/fse_monitor.scss";
</style >
